<template>
  <div class="data_container">
    <div class="data_main">
      <!-- 主体头部 -->
      <div class="top_area">
        <i class="el-icon-arrow-left"></i>
        <span class="return_operation" @click="returnOperation">返回</span>
        <span class="leftVertical_ine"></span>
        <span class="data_name">创建训练任务</span>
        <span style="display: inline-block; float: right">
          <el-button type="primary" @click="submitForm('ruleForm')"
            >创建</el-button
          >
          <el-button @click="resetForm('ruleForm')">取消</el-button>
        </span>
      </div>
      <!-- 主体区域 -->
      <div class="form">
        <el-form
          :model="ruleForm"
          :label-position="labelPosition"
          :rules="rules"
          ref='ruleForm'
          label-width='9rem'
        >
          <template v-for="(item, index) in formData">
            <el-form-item
              v-if="item.type === 'singleBox' && item.isShow"
              :label="item.text"
              :prop="item.id"
              :key="index"
            >
              <el-radio-group v-model="ruleForm[item.id]">
                <el-radio-button
                  v-for="(item1, index1) in item.op"
                  :label="item1.value"
                  :name="item1.id"
                  :key="index1"
                  value='item1.value'
                >{{item1.text}}</el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item
              :label="item.text"
              v-else-if="item.ids === ruleForm.type1&&item.type === 'algorithmDrop'"
              :prop="item.id"
              :key="index"
            >
              <el-select
                v-model="ruleForm[item.id]"
                :placeholder="item.placeHolder"
                @change="(v)=>manyChange(v,allNewAlgo)"
              >
                <el-option
                  v-for="(item, index) in allAlgoList.name"
                  :key="index"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              v-else-if="item.type === 'allDrop'"
              :prop="item.id"
              :key="index"
              :label="item.text"
            >
              <el-select
                v-model="ruleForm[item.id]"
                :placeholder="item.placeHolder"
              >
                <el-option
                  v-for="(item, index) in flavorData[item.id]"
                  :key="index"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <!-- 下拉框 -->
            <el-form-item
              v-else-if="item.type === 'drop' && item.ids === ruleForm.type && item.isShow"
              :prop="item.id"
              :key="index"
            >
              <el-select
                v-model="ruleForm[item.id]"
                :placeholder="item.placeHolder"
                @change="(val)=>checkChange(val,allNewList)"
              >
                <el-option
                  v-for="(item1, index) in allDataList[item.id]"
                  :key="index"
                  :value="item1"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              :label="item.text"
              v-else-if="item.type === 'description'"
              :prop="item.id"
              :key="index"
            >
              <el-input
                type='textarea'
                v-model="ruleForm[item.id]"
                :autosize="{ minRows: 4, maxRows: 6 }"
              ></el-input>
            </el-form-item>
            <el-form-item
              :label="item.text"
              v-else-if="item.ids === ruleForm.type && item.isShow"
              :prop="item.id"
              :key="index"
            >
              <el-input
                v-model="ruleForm[item.id]"
                :placeHolder="item.placeHolder"
              ></el-input>
            </el-form-item>
            <el-form-item
              :label="item.text"
              v-else-if="item.id === 'name'"
              :prop="item.id"
              :key="index"
            >
              <el-input
                v-model="ruleForm[item.id]"
                :placeHolder="item.placeHolder"
              ></el-input>
            </el-form-item>
          </template>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import infoComponentVue from '../../../../components/infoComponent/infoComponent.vue';
import data from '../../../../components/createData.js';
export default {
  components: {
    infoComponentVue,
  },
  data() {
    return {
      labelPosition: 'left',
      ruleForm: {
        'type': 0,
        'type1': 3,
        'name': '',
        'description': '',
        'code_dir': '',
        'boot_file':'',
        'engine_id': '',
        'engine_name': '',
        'engine_version': '',
        'flavor_id': '',
        'image_url': '',
        'command': '',
        'id': '',
      },
      allDataList: {
        'engine_id': []
      },
      allAlgoList:{
        'name':[]
      },
      flavorData:{
        'flavor_id': []
      },
      allNewList: [],
      allNewAlgo:[],
      allFlavorList: [],
      formStates:{},
      contentStates:{},
      rules: {},
      formData: data.trainOptions,
      typeChild: [
        'engine_id',
        'code_dir',
        'boot_file',
        'image_url',
        'code_dir',
        'command',
      ],
    };
  },
  created() {
    this.formData.forEach((element, index) => {
      this.rules[element.id] = element.rule;
    });
    this.retrieveData();
    this.algorithmData();
    this.getData();   
  },
  methods: {
    // 返回上一级
    returnOperation() {
      this.$router.push({ path: '/TrainingTask' });
    },
    // 多参数传值
    checkChange(val, list){
      list.forEach(item=>{
        if( item.engine_id === val){
          this.formStates['engine_name']=item['engine_name'];
          this.formStates['engine_version']=item['engine_version']
        }
      })
    },
    manyChange(v,lis){
      lis.forEach(item=>{
        if(item.name === v){
          this.contentStates['id']=item['id']
        }
      })
    },
    // 创建
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if(this.ruleForm.type === 0||this.ruleForm.type == 'algorithmDrop'){
            this.ruleForm['engine_name']=this.formStates['engine_name'];
            this.ruleForm['engine_version']=this.formStates['engine_version'];
            this.ruleForm['id']=this.contentStates['id'];
          }
          let { type, type1, ...params} = this.ruleForm;
          if(type1 === 3){
            params.type = this.ruleForm.type;
          }else{
            params.type = this.ruleForm.type1;
          }
          this.$url.post('data/train/job', params).then((res) => {
            if (res.status <300) {
              this.$message.success('创建成功');
              this.$router.push({ path: '/TrainingTask' });
            } else {
              this.$message.error('创建失败');
            }
          });
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    retrieveData(){
      this.$url.get('data/train/flavor').then((res) => {
        this.flavorData['flavor_id'] = res.data.data.flavors_list.map((item) => {
          return item.flavor_id;    
        });
      });
    },
    getData() {
      this.$url.get('data/train/engine').then((res) => {
        this.allDataList['engine_id'] = res.data.data.engine_list.map((item) => {
          return item.engine_id;
        });
        this.allNewList= res.data.data.engine_list
      });
    },
    algorithmData() {
      this.$url('data/train/algorithm').then((res) => {
        this.allAlgoList['name']= res.data.data.data_list.map((item) => {
          Object.assign(item, item.metadata)
          return item.name;   
        });
        this.allNewAlgo= res.data.data.data_list
        this.allNewAlgo.map(item => {
          Object.assign(item, item.metadata)
          return item
        })
      });
    },
  },
  watch: {
    'ruleForm.type': {
      handler(val) {
        let op;
        this.formData.forEach((item) => {
          if (item.id == 'type') {
            op = item.op;
          }
        });
      },
    },
    'ruleForm.type1': {
      handler(val) {
        let temp, op;
        this.formData.forEach((item) => {
          if (item.id == 'type1') {
            op = item.op;
          }
        });
        let index = -1;
        temp = this.formData.filter((ite, inde) => {
          if (ite.id === 'type') {
            index = inde;
          }
          return ite.id === 'type';
        })[0];
        if (val === 3) {
          temp.isShow = true;
          for (let i = 0; i < this.formData.length; i++) {
            const element = this.formData[i];
            if (this.typeChild.includes(element.id)) {
              this.formData[i].isShow = true;
            }
          }
        } else {
          temp.isShow = false;
          for (let i = 0; i < this.formData.length; i++) {
            const element = this.formData[i];
            if (this.typeChild.includes(element.id)) {
              this.formData[i].isShow = false;
            }
          }
        }
        if (index !== -1) {
          this.formData[index] = temp;
        }
      },
    },
  },
};
</script>

<style lang="less" scoped>
.data_container {
  // 主体区域样式
  .data_main {
    width: 1520px;
    height: 710px !important;
    .top_area {
      margin-bottom: 40px;
    }
    .form {
      width: 760px !important;
      padding: 10px 740px 10px 40px;
      border: 1px solid #e6e6e6;
      .el-form-item {
        margin-top: 20px;
      }
      .el-select{
        width: 616px;
      }
    }
  }
}
</style>
